<template>
  <view>
    <component
      :is="active"
      v-model:refresh="refresh"
      v-model:onMore="onMore"
      @count="handleCount"
    />
    <g-tab-bar
      :tabs="tabs"
      v-model:active="pageIndex"
      gaussian
      :occupy="pageIndex != 2"
      @change="chnageTab"
    />
    <g-upgrade v-model:value="upgradeShow" :info="upgradeInfo" />
  </view>
</template>

<script setup>
import { shallowRef, markRaw, ref, onBeforeUnmount } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { getMsgUnRead } from "@/request/message";

import Home from "@/pages/Home/index.vue";
// import Order from "@/pages/Order/index.vue";
import Order from "@/pages/Order/cp/WorkOrder.vue";
import Task from "@/pages/Task/index.vue";
import Message from "@/pages/Message/index.vue";
import User from "@/pages/user/index.vue";

import homeIcon from "@/static/home/icon_home.png";
import orderIcon from "@/static/home/icon_order.png";
import taskIcon from "@/static/home/icon_task.png";
import messageIcon from "@/static/home/icon_message.png";
import userIcon from "@/static/home/icon_user.png";
import homeIconActive from "@/static/home/icon_home_active.png";
import orderIconActive from "@/static/home/icon_order_active.png";
import taskIconActive from "@/static/home/icon_task_active.png";
import messageIconActive from "@/static/home/icon_message_active.png";
import userIconActive from "@/static/home/icon_user_active.png";

const active = shallowRef(markRaw(Home)); // 选中的tab
const pageIndex = ref(0); // 当前菜单
const tabs = ref([
  {
    label: "首页",
    icon: homeIcon,
    activeIcon: homeIconActive,
    path: markRaw(Home),
    num: 0,
  },
  {
    label: "我的工单",
    icon: orderIcon,
    activeIcon: orderIconActive,
    path: markRaw(Order),
    num: 0,
  },
  {
    label: "任务大厅",
    icon: taskIcon,
    activeIcon: taskIconActive,
    path: markRaw(Task),
    num: 0,
  },
  {
    label: "消息",
    icon: messageIcon,
    activeIcon: messageIconActive,
    path: markRaw(Message),
    num: 0,
  },
  {
    label: "我的",
    icon: userIcon,
    activeIcon: userIconActive,
    path: markRaw(User),
    num: 0,
  },
]); // 菜单列表
const query = ref(""); // 页面路由参数
const refresh = ref(false); // 刷新
const onMore = ref(false); // 上拉加载
const upgradeShow = ref(false); // 升级弹窗
const upgradeInfo = ref({}); // 升级信息

onLoad((e) => {
  if ("tab" in e) {
    active.value = tabs.value[e.tab].path;
    pageIndex.value = e.tab;
    query.value = new URLSearchParams(e).toString();
  }
  getMessageCount();
  uni.$on("upgrade", (v) => {
    if (v) {
      upgradeInfo.value = v;
      upgradeShow.value = true;
    }
  });
});

onPullDownRefresh(() => {
  refresh.value = true;
});

onReachBottom(() => {
  onMore.value = true;
});

onBeforeUnmount(() => {
  uni.$off("upgrade");
});

// 切换组件
const chnageTab = (val) => {
  uni.stopPullDownRefresh();
  active.value = val.path;
  refresh.value = false;
  if (query.value) {
    uni.redirectTo({ url: "/pages/index/index?tab=" + val.index });
  }
  console.log(val, "切换菜单");
};

// 统计数量
const handleCount = (val) => {
  const index = tabs.value.findIndex((i) => i.label == val.label);
  if (index != -1) {
    tabs.value[index].num = val.count;
  }
};

// 获取消息数量
const getMessageCount = () => {
  getMsgUnRead().then((res) => {
    if (res.code == 200) {
      const { reminderCount, systemNoticeCount, toDoCount } = res.data;
      tabs.value[3].num = reminderCount + systemNoticeCount + toDoCount;
    }
  });
};
</script>

<style lang="scss" scoped></style>
